<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <!-- jquery -->
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <!-- layer -->
    <script type="text/javascript" src="/layer/layer.js"></script>
    <!-- common.js -->
    <script type="text/javascript" src="/js/common.js"></script>

    <style>
        #goodsName {
            font-size: 20px;
            color: #2aabd2;
        }

        .title {
            font-size: 15px;
            color: black;
        }

        .inner {
            font-size: 17px;
            color: red;
        }
        #list-parant td{
            vertical-align: middle;
            text-align: center;
        }
        .hr-double {
            border: 0;
            border-top: 3px double #d0d0d5;
        }
    </style>
</head>
<body>
<div id="list-parent" class="panel panel-default">
    <img src="/img/img.png" width="20%" height="20%">
    <div class="panel-heading"><b style="font-size: 20px">收货地址</b></div>
    <table class="table" id="address">
        <tr>
            <td class="title">收货人</td>
            <td colspan="3" ><input id="nickName"></td>
        </tr>
        <tr>
            <td class="title">电话</td>
            <td colspan="3" ><input id="phone"></td>
        </tr>
        <tr>
            <td class="title">地址</td>
            <td colspan="3" ><input id="directAddress"></td>
        </tr>
        <tr>
            <td><button class="btn " type="submit" id="addressButton" onclick="postAddress()">提交</button></td>
        </tr>
    </table>

    <div class="panel-heading"><b style="font-size: 20px">秒杀商品详情</b></div>

    <table class="table" id="goods">
        <tr>
            <td class="title">商品名称</td>
            <td colspan="3" ><b id="goodsName"></b></td>
        </tr>
        <tr>
            <td class="title">商品图片</td>
            <td class="inner" colspan="3"><img id="goodsImg" width="200px" height="200px"/></td>
        </tr>
        <tr>
            <td class="title">秒杀开始时间</td>
            <td class="inner" id="startTime"></td>
            <td>
                <input type="hidden" id="remainSeconds">
                <!--                <span th:if="${secKillStatus eq 0}">秒杀倒计时: <span id="countDown" th:text="${remainSeconds}"></span>秒-->
                <!--                </span>-->
                <!--                <span th:if="${secKillStatus eq 1}">秒杀进行中</span>-->
                <!--                <span th:if="${secKillStatus eq 2}">秒杀已结束</span>-->
                <span id="seckillTip"></span>
            </td>
            <td>
                <!--                <form id="secKillForm" method="post" action="/seckill/doSeckill">-->
                <!--                    <input type="hidden" name="goodsId" id="goodsId">-->
                <!--                    <button class="btn btn-primary btn-block" type="submit" id="buyButton">立即秒杀</button>-->
                <!--                </form>-->
                <div class="row">
                    <div class="form-inline">
                        <img id="captchaImg" width="130" height="32" onclick="refreshCaptcha()" style="display: none">
                        <input id="captcha" class="form-control" style="display: none">
                        <button class="btn btn-primary" type="submit" id="buyButton"
                                onclick="getSeckillPath()">立即秒杀
                            <input type="hidden" name="goodsId" id="goodsId">
                            <input type="hidden" name="addressId" id="addressId">
                        </button>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="title">限购数量</td>
            <td class="inner" colspan="3" id="limitCount"></td>
        </tr>
        <tr>
            <td class="title">单价</td>
            <td class="inner" colspan="3" id="goodsPrice"></td>
        </tr>
        <tr>
            <td class="title">库存数量</td>
            <td class="inner" colspan="3" id="stockCount"></td>
        </tr>

    </table>



</div>
</body>
<script>
    $(function () {
        // countDown();
        getDetails();
    });

    function refreshCaptcha() {
        $("#captchaImg").attr("src", "/seckill/captcha?goodsId=" + $("#goodsId").val() + "&time=" + new Date());
    }

    function postAddress() {
        var nickName = $("#nickName").val();
        var phone = $("#phone").val();
        var directAddress = $("#directAddress").val();
        $.ajax({
            url: "/address/save",
            type: "GET",
            data: {
                nickName: nickName,
                phone: phone,
                directAddress: directAddress
            },
            success: function (data) {
                if (data.code == 200) {
                    var addressId = data.object;
                    $("#addressId").val(addressId);
                    layer.msg("添加收货地址成功")
                } else {
                    layer.msg(data.message);
                }
            },
            error: function () {
                layer.msg("客户端请求错误");
            }
        });
    }

    function getSeckillPath() {
        var goodsId = $("#goodsId").val();
        var captcha = $("#captcha").val();
        g_showLoading();
        $.ajax({
            url: "/seckill/path",
            type: "GET",
            data: {
                goodsId: goodsId,
                captcha:captcha
            },
            success: function (data) {
                if (data.code == 200) {
                    var path = data.object;
                    doSecKill(path);
                } else {
                    layer.msg(data.message);
                }
            },
            error: function () {
                layer.msg("客户端请求错误");
            }
        });
    }


    //秒杀方法
    function doSecKill(path) {
        var goodsId =  $('#goodsId').val();
        var addressId = $('#addressId').val();

        console.log(goodsId)
        console.log(addressId)
        $.ajax({
            url: 'seckill/' + path + '/doSeckill',
            // url: 'seckill/doSeckill',
            type: "POST",
            data: {
                goodsId: $('#goodsId').val(),
                addressId: $('#addressId').val()
            },
            success: function (data) {
                if (data.code == 200) {
                    // window.location.href="/orderDetail.html?orderId="+data.object.id;
                    getResult($("#goodsId").val(),$('#addressId').val());
                } else {
                    layer.msg(data.message);
                }
            }, error: function () {
                layer.msg("客户端请求出错");
            }

        });
    }

    function getResult(goodsId,addressId) {
        g_showLoading();
        console.log(goodsId)
        console.log(addressId)
        $.ajax({
            url: "/seckill/getResult",
            type: "GET",
            data: {
                goodsId: goodsId,
                addressId: addressId
            },
            success: function (data) {
                if (data.code == 200) {
                    var result = data.object;
                    if (result < 0) {
                        layer.msg("对不起，秒杀失败");
                    } else if (result == 0) {
                        setTimeout(function () {
                            getResult(goodsId,addressId)
                        });
                    } else {
                        layer.confirm("恭喜您，秒杀成功！查看订单？", {btn: ["确定", "取消"]},
                            function () {
                                window.location.href = "/orderDetail.html?orderId=" + result;
                            },
                            function () {
                                layer.close();
                            }
                        )
                    }
                }
            },
            error: function () {
                layer.msg("客户端请求错误");
            }
        });
    }

    function getDetails() {
        var goodsId = g_getQueryString("goodsId");
        console.log(goodsId);
        $.ajax({
            url: '/goods/detail/' + goodsId,
            type: 'GET',
            success: function (data) {
                if (data.code == 200) {
                    render(data.object);
                    countDown();
                } else {
                    layer.msg("客户端请求出错");
                }
            },
            error: function () {
                layer.msg("客户端请求出错");
            }
        })
    }

    function render(detail) {
        var TUser = detail.user;
        var goodsVo = detail.goodsVo;
        var remainSeconds = detail.remainSeconds;
        var seckillStatus = detail.seckillStatus;
        if (TUser) {
            $("#userTip").hide();
        }
        $("#goodsName").text(goodsVo.goodsName);
        $("#goodsImg").attr("src", goodsVo.goodsImg);
        $("#startTime").text(new Date(goodsVo.startDate).format("yyyy-MM-dd HH:mm:ss"));
        $("#remainSeconds").val(remainSeconds);
        $("#seckillStatus").val(seckillStatus);
        $("#goodsId").val(goodsVo.id);
        $("#goodsPrice").text(goodsVo.goodsPrice);
        $("#limitCount").text(goodsVo.limitCount);
        // $("#goodsPrice").text(goodsVo.goodsPrice);
        // $("#seckillPrice").text(goodsVo.seckillPrice);
        $("#stockCount").text(goodsVo.stockCount);
        $("#riskLevel").text(goodsVo.riskLevel);
        $("#annualisedReturns").text(goodsVo.annualisedReturns);
        $("#goodsPeriod").text(goodsVo.goodsPeriod);

    }

    function countDown() {
        var remainSeconds = $("#remainSeconds").val();
        var seckillStatus = $("#seckillStatus").val();
        var timeout;
        //秒杀还未开始
        if (remainSeconds > 0) {
            $("#buyButton").attr("disabled", true);
            $("#seckillTip").html("秒杀倒计时：" + remainSeconds + "秒");
            timeout = setTimeout(function () {
                // $("#countDown").text(remainSeconds - 1);
                $("#remainSeconds").val(remainSeconds - 1);
                countDown();
            }, 1000);
            // 秒杀进行中
        } else if (remainSeconds == 0) {
            $("#buyButton").attr("disabled", false);
            if (timeout) {
                clearTimeout(timeout);
            }
            $("#seckillTip").html("秒杀进行中")
            refreshCaptcha();
            $("#captchaImg").show();
            $("#captcha").show();
        } else {
            $("#buyButton").attr("disabled", true);
            $("#seckillTip").html("秒杀已经结束");
            $("#captchaImg").hide();
            $("#captcha").hide();
        }
    };

</script>
</html>